<template> <!-- 设置 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-install">
			<view class="install-box">
				<u-cell-group>
					<u-cell-item title="好友对战题目设置" :value="userInfo.timu_num" @click="isPickerNumber = true"
						:title-style="cellstyle"></u-cell-item>
					<u-cell-item title="游戏背景音乐" :value="music" @click="isPickerSwitch = true, switchType = 1"
						:title-style="cellstyle"></u-cell-item>
					<u-cell-item title="游戏开始/答题错误震动" :value="vibrate" @click="isPickerSwitch = true, switchType = 2"
						:title-style="cellstyle"></u-cell-item>
					<u-cell-item title="字体大小" value="默认" :title-style="cellstyle"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="install-box m-top-30">
				<u-cell-group>
					<u-cell-item title="建议/BUG反馈" @click="feedbackLink" :title-style="cellstyle"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="install-box m-top-30">
				<u-cell-group>
					<u-cell-item title="退出登录" :title-style="cellstyle" @click="handleLogout"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view>
			<view style="display: flex;justify-content: center;align-items: center;" class="bg"><image src="../../static/setting.png"></image></view>
			<view style="text-align: center;padding-top: 36rpx;color: gray;width: 80%;margin-left: 10%;">
				<view>本小程序由广东省哥弟菩及公益基金会赞助 </view>
				<view>由广州市浪花智慧助老服务中心制作</view>
				<view>由湾大科技（广州）有限公司负责技术开发</view>
				</view>
		</view>
		<!-- 选择答题数量 -->
		<u-picker mode="selector" v-model="isPickerNumber" :range="numberList" :default-selector="[numberIndex]"
			@cancel="isPickerNumber=false" @confirm="handPickNumber"></u-picker>
		<!-- 选择开关 -->
		<u-picker mode="selector" v-model="isPickerSwitch" :range="switchList" :default-selector="[0]"
			@cancel="isPickerSwitch=false" @confirm="handPickSwitch"></u-picker>
	</view>
</template>

<script>
	import store from '@/store'
	import * as UserApi from '@/api/user'
	export default {
		data() {
			return {
				isLoading: true,
				userInfo: {},
				isPickerNumber: false,
				numberIndex: 0,
				pickerNumber: 10,
				numberList: [5, 10, 15, 20],
				isPickerSwitch: false,
				switchList: ['开启', '关闭'],
				switchType: 1,
				music: '开启',
				vibrate: '开启',
				cellstyle: {
					color: '#000',
					fontSize: '36rpx',
				}
			}
		},
		methods: {
			getUserInfo() {
				let app = this
				UserApi.info({})
					.then(result => {
						console.log(96)
						app.userInfo = result.data.userInfo
						app.music = result.data.userInfo.is_music == 1 ? '开启' : '关闭'
						app.vibrate = result.data.userInfo.is_shake == 1 ? '开启' : '关闭'

						app.isLoading = false

					})
			},
			setting() {
				UserApi.setting({
						form: app.form
					})
					.then(result => {
						app.$toast(result.message)

					})
			},
			feedbackLink() {
				uni.navigateTo({
					url: '/pagesNew/rank/feedback'
				})
			},
			handPickNumber(e) {
				this.numberIndex = e[0]
				var pickerNumber = this.numberList[this.numberIndex]
				this.userInfo.timu_num = pickerNumber
				UserApi.setting({
						form: {
							timu_num: pickerNumber
						}
					})
					.then(result => {
						this.$toast(result.message)

					})
			},
			handPickSwitch(e) {
				const index = e[0]
				if (this.switchType == 1) {
					var music = this.switchList[index]
				
				
					
					this.music=music
					
					UserApi.setting({
							form: {
								is_music: music=='开启'?1:0
							}
						})
						.then(result => {
							this.$toast(result.message)
					
						})
				}
				if (this.switchType == 2) {
				
					var is_shake = this.switchList[index]
					
				this.vibrate=is_shake
					
					UserApi.setting({
							form: {
								is_shake: is_shake=='开启'?1:0
							}
						})
						.then(result => {
							this.$toast(result.message)
					
						})
				}
			},
			// 退出登录
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},
			onRefreshPage() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},

		},
		onLoad() {
			this.getUserInfo()
		},
	}
</script>

<style lang="scss">
	.bg image{
		width: 300rpx;
		height: 225rpx;
	}
	.layout-install {
		padding: 36rpx 36rpx;
	}

	.install-box {
		border-radius: 10rpx;
		background: #ffffff;
		overflow: hidden;
	}
</style>